<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="vue.js"></script>
    <script src="vue-router-3.0.1.js"></script>
</head>
<body>

<div id="app">
    <router-view></router-view>
    <button @click="gologi">跳转到音乐</button>
</div>
<template id="tem1">
    <div>
    <h1>音乐跳转到电影</h1>
    <button @click="gores">跳电影</button>
    </div>
</template>
<script>
var login={
  template:"#tem1",
  data(){
    return{
      msg:"123"
    }
  },
  methods:{
    gores(){
      this.$router.push("/register")
    }
  },
  // created(){//DOM还没有生成
  //   pass
    //组件的生命周期钩子函数
    // $route  信息数据
    // $router  功能函数
    // console.log(this.$route)
    // console.log(this.$route.query.id)
  // }
  // mounted(){//  数据已经装载上去了，dom已经生成

  // }
}
var register={
  template:"<h1>注册-</h1>",
  data(){
    return {
      msg:"223"
    }
  },
  created(){
    //组件的生命周期钩子函数
    // console.log(this.$route)
    // console.log(this.$route)
  }
}
var router=new VueRouter({
  routes:[
      // 查询字符串  不用改
    {path:"/login",component:login},
    {path:"/register",component:register},
  ]
})
var vm=new Vue({
  el:"#app",
  data:{},
  methods:{
    gologi() {
      this.$router.push("/login")
    }
  },
  router:router
  // router
})
</script>

</body>
</html>